<!-- 
边框设置 
-->

<template>
  <div class="colStart">
    <div class="rowStart">
      <el-select v-model="_widget.style.text.fontWeight!" style="width: 120px">
        <el-option label="正常" value="normal"></el-option>
        <el-option label="中等" value="medium"></el-option>
        <el-option label="加粗" value="bold"></el-option>
      </el-select>
      <el-input v-model="_widget.style.text.fontSize!" style="width: 80px" type="number" class="ml-4" />
      <el-color-picker v-model="_widget.style.text.color!" show-alpha class="ml-4"></el-color-picker>
    </div>

    <div class="rowStart mt-4" style="align-items: center">
      <div class="rowStart" style="flex: 1">
        <div class="cLabel">字间距</div>
        <el-input-number v-model="_widget.style.text.letterSpacing!" class="ml-4" controls-position="right" :min="0" />
      </div>
      <div class="rowStart ml-4" style="flex: 1">
        <div class="cLabel">行高</div>
        <el-input-number v-model="_widget.style.text.lineHeight!" controls-position="right" class="ml-4" :min="0" />
      </div>
    </div>
    <div class="rowStart mt-4">
      <div class="cLabel">行数</div>
      <el-input-number v-model="_widget.style.text.lines!" controls-position="right" class="ml-4" :min="0" />
    </div>

    <div class="rowStart mt-4" style="align-items: center">
      <div class="rowStart">
        <div class="cLabel mr-4">水平排列</div>
        <el-radio-group v-model="_widget.style.text.textAlign!">
          <el-radio value="left">居左</el-radio>
          <el-radio value="center">居中</el-radio>
          <el-radio value="right">居右</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="rowStart mt-4" style="align-items: center">
      <div class="rowStart">
        <div class="cLabel mr-4">样式</div>
        <el-radio-group v-model="_widget.style.text.textStyle!">
          <el-radio value="italic">斜体</el-radio>
          <el-radio value="underline">下划线</el-radio>
          <el-radio value="line-through">删除线</el-radio>
          <el-radio value="">无</el-radio>
        </el-radio-group>
      </div>
    </div>

    <div class="colStart mt-4">
      <div class="rowBetween">
        <div class="rowStart">
          <div class="cLabel mr-4">阴影</div>
          <el-switch v-model="_widget.style.text.isBorderShadow!" active-text="开启" />
        </div>
        <div class="rowStart ml-4" style="align-items: center">
          <div class="cLabel">颜色</div>
          <el-color-picker
            v-model="_widget.style.text.borderShadow![3]"
            show-alpha
            :disabled="!_widget.style.text.isBorderShadow"
          ></el-color-picker>
        </div>
      </div>
      <div v-if="_widget.style.text.isBorderShadow">
        <div class="rowBetween mt-2">
          <div class="rowStart" style="align-items: center">
            <div class="cLabel2">水平</div>
            <el-input-number
              v-model="_widget.style.text.borderShadow![0]"
              controls-position="right"
              style="width: 120px"
              :disabled="!_widget.style.text.isBorderShadow"
            />
          </div>
          <div class="rowStart" style="align-items: center">
            <div class="cLabel2">垂直</div>
            <el-input-number
              v-model="_widget.style.text.borderShadow![1]"
              controls-position="right"
              style="width: 120px"
              :disabled="!_widget.style.text.isBorderShadow"
            />
          </div>
        </div>
        <div class="rowBetween mt-2">
          <div class="rowStart" style="align-items: center">
            <div class="cLabel2">模糊半径</div>
            <el-input-number
              v-model="_widget.style.text.borderShadow![2]"
              controls-position="right"
              style="width: 120px"
              :disabled="!_widget.style.text.isBorderShadow"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TypeWidget } from "@/types/TypeDesign";
import type { PropType } from "vue";

const props = defineProps({
  _widget: {
    type: Object as PropType<TypeWidget>,
    default: () => ({}),
  },
});
</script>

<style lang="scss" scoped>
.cLabel {
  font-size: 14px;
  width: 60px;
  align-self: center;
  text-align: right;
}

.cLabel2 {
  font-size: 14px;
  width: 100px;
  align-self: center;
  text-align: right;
  padding-right: 20px;
}
</style>
